<template>
  <div class="tab-bar-item" @click="handleClick">
    <div v-if="!isActive">
      <slot name="item-img"></slot>
    </div>
    <div v-else>
      <slot name="item-img-active"></slot>
    </div>
    <div :style="activeStyle">
      <slot name="item-txt"></slot>
    </div>

  </div>
</template>

<script>
export default {
	name: "TabBarItem",
	props:{
		path:String,
		activeColor:{
			type:String,
			default:'red',
		}
	},
  data() {
    return {

    }
	},
	computed:{
		isActive(){
			// this.$route.path 当前活跃的path，
			// this.path  每个item的path，每个item有固定的path，在App自己定义的
			return this.$route.path.indexOf(this.path) !== -1;
			// return this.$route.path == this.path
		},
		activeStyle(){
			return this.isActive ? {color:this.activeColor} : {}
		}
	},
	methods:{
		handleClick(){
			this.$router.push(this.path)  //可以返回上一页
			// this.$router.replace(this.path)  //替换，不能返回
		}
	}
};
</script>

<style>
</style>
